<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌编码:</p>
			</el-col>
			<el-col :span="4" style="float: left">
				<el-input size="small" v-model="bCode" placeholder="输入品牌编码" style="width:120!important"></el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌名称:</p>
			</el-col>
			<el-col :span="5" style="float: left">
				<el-input size="small" v-model="bName" placeholder="输入品牌名称" style="width:120!important"></el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">厂家:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="produceCode" clearable placeholder="请选择厂家">
					<el-option v-for="item in carBusComboData" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<el-button type="primary" size="small" v-on:click='query'>查询</el-button>
			</el-col>
			<el-col :span="6" style="text-align: right;margin-left:10px;">
	
				<el-button type="primary" size="small" v-on:click="add">新增</el-button>
				<el-button type="primary" size="small" v-on:click="edit">编辑</el-button>
				<el-button type="primary" size="small" v-on:click="start">启用</el-button>
				<el-button type="primary" size="small" v-on:click="stop">停用</el-button>
			</el-col>
	
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="brand.dataList" stripe border style="width: 100%" highlight-current-row @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
	
					<el-table-column prop="bCode" label="品牌编码" width="250">
					</el-table-column>
					<el-table-column prop="bName" label="品牌名称">
					</el-table-column>
					<el-table-column prop="bLevl" label="品牌等级" :formatter="carLevelCov" width="180">
					</el-table-column>
					<el-table-column prop="produceCode" label="厂家" :formatter="carBusCov">
					</el-table-column>
					<el-table-column label="状态" props="status" width=120 :formatter="statusCov">
					</el-table-column>
					<!--<el-table-column label="操作" width="200" fixed="right">
											<template scope="scope">
												<el-tooltip class="item" effect="light" content="编辑" placement="top">
													<el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="edit(scope.$index)"></el-button>
												</el-tooltip>
												<el-tooltip class="item" effect="light" content="启用" placement="top">
													<el-button type="info" size="mini" class="iconfont icon-kaishi" @click.native.prevent="start(scope.$index)"></el-button>
												</el-tooltip>
												<el-tooltip class="item" effect="light" content="停用" placement="top">
													<el-button type="warning" size="mini" class="iconfont icon-stop" @click.native.prevent="stop(scope.$index)"></el-button>
												</el-tooltip>
											</template>
										</el-table-column>-->
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="brand.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="品牌管理" v-model="brandFormShow">
			<el-form :model="brandFormData" ref="brandForm" :rules="brandRule" label-width="100px">
				<el-form-item label="品牌编码" prop="bCode" required>
					<el-input size="small" v-model="brandFormData.bCode"></el-input>
				</el-form-item>
				<el-form-item label="品牌名称" prop="bName" required>
					<el-input size="small" v-model="brandFormData.bName"></el-input>
				</el-form-item>
				<el-form-item label="品牌等级" required prop="bLevel">
					<el-select size="small" v-model="brandFormData.bLevel" prop="bLevel" placeholder="请选择">
						<el-option v-for="item in carLevelComboData" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="生产厂家" required prop="produceCode">
					<el-select size="small" v-model="brandFormData.produceCode" placeholder="请选择">
						<el-option v-for="item in carBusComboData" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="显示顺序" prop="dispOrder">
					<el-input-number size="small" v-model="brandFormData.dispOrder" :min="0" :max="999"></el-input-number>
				</el-form-item>
				
				<el-row>
						<el-col :span="6" style="margin-left: 50px;">
							<P style="font-size: larger;">门店图片：</P>
						</el-col>
					</el-row>
						
					<el-row >
						
						<el-col :span="6" style="margin-left: 50px;">
							<div id="imageRowId">
								<el-upload 
								  class="avatar-uploader"
								  :action="imgPostUrl"
								  name = "image"
								  :show-file-list="false"
								  :on-success="handleAvatarSuccess"
								  :before-upload="beforeAvatarUpload">
								  <!--<img id="hhhh" class="avatar" :src="loacalImageUrl"/>-->
								  <img class="avatar" v-if='loacalImageUrl != ""'  :src="loacalImageUrl"/>
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
								  <!--<img class="avatar" v-if="loacalImageUrl != ''" :src="loacalImageUrl"/>
								  <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
								</el-upload>
							</div>
							
						</el-col>
						
					</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="brandFormShow = false">取 消</el-button>
				<el-button type="primary" @click="saveBrand">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment'
export default {
	data: function () {
		return {
			loacalImageUrl:"",
			imgPostUrl:"",
			//分页设置
			page: this.page,
			//分组数据
			brand: {
				total: 0,
				dataList: []
			},
			//查询条件，组织
			bCode: '',
			bName: '',
			//查询条件、品牌编码
			produceCode: '',
			//当前分组页
			curPage: 1,
			//厂家下拉
			carBusComboData: [],
			//厂家转换
			carBusCovData: {},
			//品牌等级转换
			carLevelCovData: {},
			//品牌等级下拉
			carLevelComboData: [],
			defaultProps: {
				children: 'child',
				label: 'oName'
			},

			deptShow: false,
			//树型数据
			deptTreeData: [],

			//品牌表单
			//勾选的任务
			changeId: [],
			//品牌是否相同标识
			changePlantU: false,
			//字典表单
			brandFormShow: false,
			brandEmptyData: {
				"id": null,
				"createTime": 0,
				"createUser": "",
				"updateTime": 0,
				"updateUser": "",
				"status": "1",
				"bCode": "",
				"bLevel": "",
				"bName": "",
				"dispOrder": 1,
				"produceCode": "",

			},
			//品牌
			brandFormData: {
				"id": null,
				"createTime": 0,
				"createUser": "",
				"updateTime": 0,
				"updateUser": "",
				"status": "1",
				"bCode": "",
				"bLevel": "",
				"bName": "",
				"dispOrder": 1,
				"produceCode": "",
			},
			multipleSelection: [],
			//验证规则
			brandRule: {
				bCode: [{
					required: true,
					message: '请输入品牌编码',
					trigger: 'blur'
				}],
				bName: [{
					required: true,
					message: '请输入品牌名称',
					trigger: 'blur'
				}],
				bLevel: [{
					required: true,
					message: '请选择等级',
					trigger: 'change'
				}],
				produceCode: [{
					required: true,
					message: '请选择厂家',
					trigger: 'change'
				}],
			}

		}
	},
	computed: {

	},
	methods: {

		//选择框
		handleSelectionChange: function (val) {

			this.$data.multipleSelection = val;
			//给状态赋初值
			this.$data.changePlantU = true;
			//循环赋值（id）和判断（plateNum）
			for (var i = 0; i < val.length; i++) {
				this.$data.changeId[i] = val[i].id;
				if (val[i].bCode != val[0].bCode) {
					this.$data.changePlantU = false;
				}
			}
		},

		//分组查询
		query: function () {
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/base/brand/page',
				params: {
					bCode: this.$data.bCode,
					bName: this.$data.bName,
					pCode: this.$data.produceCode,
					start: this.$data.curPage,
					limit: this.$data.page.pageSize
				}

			}).then(function (resp) {
				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.brand = resp.data;
			}, function (error) {
				// error
			})
		},
		//启用资源
		start: function () {
			//if (this.$data.multipleSelection.length == 1) {

			//var resRoleData = this.$data.multipleSelection[0];

			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/base/brand/newstart',
				body: this.$data.multipleSelection
			}).then(function (resp) {
				this.$message(resp.data.msg);
				this.query();
			}, function (error) {
				// error
			})

			//} else {
			//	this.$message.error("请选择一条数据");
			//}
		},
		//停用资源
		stop: function () {
			//				if(this.$data.multipleSelection.length == 1) {

			//					var resRoleData = this.$data.multipleSelection[0];

			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/base/brand/newstop',
				body: this.$data.multipleSelection
			}).then(function (resp) {
				this.$message(resp.data.msg);
				this.query();
			}, function (error) {
				// error
			})
			//				}
			//				else {
			//					this.$message.error("请选择一条数据");
			//				}

		},
		//分页点击事件

		//新增
		add: function () {
			this.$data.brandFormData = Object.assign(this.$data.brandFormData, this.$data.brandEmptyData)
			this.$data.brandFormShow = true;
		},
		//编辑
		edit: function (index) {
			if (this.$data.multipleSelection.length == 1) {

				var resRoleData = this.$data.multipleSelection[0];
				this.$data.imgPostUrl = "";
				this.$data.loacalImageUrl = "";
				this.$data.brandFormData = Object.assign(this.$data.brandFormData, this.$data.brandEmptyData)

				this.$http.get(this.API_ROOT + '/base/brand/info', {
					params: {
						id: resRoleData.id,
					}
				}).then(function (resp) {

					this.$data.brandFormData = Object.assign(this.$data.brandFormData, resp.data.data);
					this.$data.brandFormShow = true;
					var t = this.moment(new Date()).format("YYYYMMDDHHmmss");
					this.$data.loacalImageUrl = this.API_ROOT + "/base/brand/readImage?id="+resp.data.data.id+"&time="+t;
					this.$data.imgPostUrl = this.API_ROOT + "/base/brand/writeImage?id="+resp.data.data.id+"&time="+t;
				}, function (error) { })

			} else {
				this.$message.error("请选择一条数据");
			}

		},
		//保存品牌
		saveBrand: function () {
			this.$refs.brandForm.validate(function (valid, $event) {
				// 验证通过
				if (valid) {
					this.$http.post(this.API_ROOT + '/base/brand/save', this.$data.brandFormData)
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.query();
								this.$data.brandFormShow = false;

							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				} else {
					return false
				}
			}.bind(this));

		},
		//字典分组,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.curPage = currentPage;
			this.query();
		},
		//日期转换
		formatTime: function (row, column) {
			if (row.createTime == "" || row.createTime == null) return "";
			return moment(Number(row.createTime)).format("YYYY-MM-DD HH:mm:ss");
		},

		openDeptTree: function (e) {

			this.$data.deptShow = true;

		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == "0" ? '已停用' : '已启用';
		},
		//类型转换
		carLevelCov: function (row, column) {
			return this.$data.carLevelCovData[row.bLevel];
		},
		//厂家转换
		carBusCov: function (row, num) {
			return this.$data.carBusCovData[row.produceCode];
		},

		//点击树节点
		handleNodeClick(data) {
			this.$data.deptName = data.oName;
			this.$data.deptCode = data.id;
		},
		/*图片上传*/
		 handleAvatarSuccess(res, file) {
       	 this.loacalImageUrl = URL.createObjectURL(file.raw);
	      },
	      beforeAvatarUpload(file) {
	        const isJPG = file.type === 'image/jpeg';
	        const isMax2 = file.size / 1024 / 1024 * 1024 < 200;
	
	        if (!isJPG) {
	          this.$message.error('上传图片只能是 JPG 格式!');
	        }
	        if (!isMax2) {
	          this.$message.error('上传图片大小不能超过 200 KB!');
	        }
	        return isJPG && isMax2;
	      }

	},
	created: function () {
		//获取品牌厂家转换
		this.$http.get(this.API_ROOT + '/base/dict/convert', {
			params: {
				group: "carBus"
			}
		}).then((response) => {
			this.$data.carBusCovData = response.data;
		}, (response) => { });
		//获取品牌厂家 下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "carBus"
			}
		}).then((response) => {
			this.$data.carBusComboData = response.data;
		}, (response) => { });

		//获取品牌等级转换
		this.$http.get(this.API_ROOT + '/base/dict/convert', {
			params: {
				group: "carLevel"
			}
		}).then((response) => {
			this.$data.carLevelCovData = response.data;
		}, (response) => { });
		//获取品牌等级下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "carLevel"
			}
		}).then((response) => {
			this.$data.carLevelComboData = response.data;
		}, (response) => { });

		//查询品牌

		this.query();

	}
}
</script>
<style>
.el-table .info-row {
	height: 15px !important;
}

.item {
	width: 30px;
}

.el-dropdown .el-button-group,
.el-table .el-tooltip,
.el-table .el-tooltip__rel {
	display: inline;
}

.el-input {
	clear: both;
}

.el-table {
	height: 100%;
	width: 100%;
}

.avatar-uploader .el-upload {
    border: 3px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 378px;
    height: 218px;
    line-height: 378px;
    text-align: center;
  }
 .avatar {
    width: 378px;
    height: 218px;
    display: block;
  }
</style>